<template>
	<view>
		<view @click="showDate = true" class="date_new">{{
			newDate == '' ? '选择需要查看信息的时间段' : newDate
		}}</view>
		<view class="tabsStyle"
			><u-tabs
				active-color="#5268d4"
				:list="tabList"
				:current="current"
				:bar-style="barStyle"
				:bar-width="100"
				:is-scroll="false"
				@change="tabChange"
			></u-tabs
		></view>
		<!-- 门诊 -->
		<view v-if="current == 0">
			<view style="margin-top: 40rpx" v-if="outpatientList.length > 0">
				<view
					class="message_box"
					v-for="(item, index) in outpatientList"
					:key="index"
					@click="outpatientClick(item)"
				>
					<view class="message_name">
						<view
							>申请科室：<text>{{ item.applyDept }}</text></view
						>
						<view
							>申请医生：<text>{{ item.applyDoctor }}</text></view
						>
						<view
							>检验名称：<text>{{ item.itemName }}</text></view
						>
						<view
							>检验科室：<text>{{ item.testDept }}</text></view
						>
						<view
							>检查日期：<text>{{ item.applyDtime }}</text></view
						>
					</view>
				</view>
			</view>

			<view v-else>
				<u-empty
					text="暂无数据"
					icon-size="200"
					icon-color="#0089ff8c"
					color="#c0c4cc"
					mode="history"
					margin-top="330"
				></u-empty>
			</view>
		</view>
		<!-- 住院 -->
		<view v-if="current == 1">
			<view v-if="hospitalized.length > 0">
				<view v-for="(item, index) in hospitalized" :key="index">
					{{ item.name }}
				</view>
			</view>

			<view v-else>
				<u-empty
					text="暂无数据"
					icon-size="200"
					icon-color="#0089ff8c"
					color="#c0c4cc"
					mode="history"
					margin-top="330"
				></u-empty>
			</view>
		</view>
		<view class="safe"></view>
		<u-calendar
			v-model="showDate"
			ref="calendar"
			:start-text="startText"
			:end-text="endText"
			:range-color="rangeColor"
			:range-bg-color="rangeBgColor"
			:active-bg-color="activeBgColor"
			@change="changeTime"
			:mode="mode"
		></u-calendar>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { getExamineList } from '../../http/api'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			// 日期选择
			mode: 'range',
			showDate: false,
			startText: '开始',
			endText: '结束',
			rangeColor: '#2979ff',
			rangeBgColor: 'rgba(41,121,255,0.13)',
			activeBgColor: '#2979ff',
			newDate: '',
			// 门诊
			outpatientList: [],
			hospitalized: [],
			tabList: [{ name: '门诊' }, { name: '住院' }],
			current: 0,
		}
	},
	mounted() {
		wx.showLoading({
			title: '加载中',
			mask: true,
		})
		this.getExamineListData(
			this.orgCode,
			this.patientIdentity,
			'',
			'',
			String(this.current),
		)
	},
	computed: {
		...mapState({
			orgCode: state => state.orgCode,
			patientId: state => state.patientId,
			patientIdentity: state => state.patientIdentity,
		}),
	},
	methods: {
		tabChange(index) {
			console.log(index)
			this.current = index
			if (index == 0) {
				this.$refs.calendar.startDate = ''
				this.$refs.calendar.today = ''
				this.newDate = ''
				this.getExamineListData(
					this.orgCode,
					this.patientIdentity,
					'',
					'',
					String(this.current),
				)
			} else if (index == 1) {
				this.$refs.calendar.startDate = ''
				this.$refs.calendar.today = ''
				this.newDate = ''
				this.getExamineListData(
					this.orgCode,
					this.patientIdentity,
					'',
					'',
					String(this.current),
				)
			}
		},
		changeTime(e) {
			this.newDate = e.startDate + '-' + e.endDate
			this.getExamineListData(
				this.orgCode,
				this.patientIdentity,
				e.startDate,
				e.endDate,
				String(this.current),
			)
		},
		getExamineListData(
			orgCode,
			patientIdentity,
			queryStartDate,
			queryEndDate,
			patientSource,
		) {
			getExamineList({
				orgCode: orgCode,
				idCard: patientIdentity,
				queryStartDate: queryStartDate,
				queryEndDate: queryEndDate,
				patientSource: patientSource,
			}).then(({ data, head }) => {
				if (this.current == 0) {
					this.outpatientList = []
					if (head.code == 200) {
						wx.showToast({
							title: '加载成功',
						})
						this.outpatientList = data
					} else {
						this.outpatientList = []
						uni.hideLoading()
						this.$refs.uToast.show({
							title: head.msg,
							type: 'error',
							duration: 1000,
						})
					}
				} else {
					this.hospitalized = []
					if (head.code == 200) {
						this.hospitalized = data
					} else {
						this.$refs.uToast.show({
							title: head.msg,
							type: 'error',
							duration: 1000,
						})
					}
				}
			})
		},
		// // // 检查报告详情
		// getTestDetailListData(orgCode, patientId, reportNo) {
		// 	getTestDetailList({
		// 		orgCode: orgCode,
		// 		patientId: patientId,
		// 		reportNo: reportNo,
		// 	}).then(({ data }) => {
		// 		console.log(data)
		// 		this.$router.navigateTo({
		// 			url:
		// 				'/pages/myReport/particulars?parameter=' +
		// 				JSON.stringify(data[0].testItemList),
		// 		})
		// 	})
		// },

		// 门诊
		outpatientClick(item) {
			console.log(item, '1231')
			// this.getTestDetailListData(this.orgCode, '1008526123', 'JY202001091127539')
			// this.getTestDetailListData(this.orgCode, this.patientId, item.reportNo)
		},
	},
}
</script>

<style lang="scss">
page {
	background-color: #f3f3f3;
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
.date_new {
	margin-top: 40rpx;
	border-width: 1px;
	border-color: #ecf5ff;
	border-style: dashed;
	padding: 5px 20px;
	border-radius: 5px;
	background-color: #2979ff;
	color: #fff;
	font-size: 16px;
	/* display: inline-block; */
	text-align: center;
}
.message_box {
	display: flex;
	padding: 20rpx;
	align-items: center;
	background: #fff;
	margin-bottom: 20px;
	.message_name {
		flex: 1;
		font-size: 30rpx;
		view {
			color: rgb(182, 182, 182);
			padding: 4px;
			test {
				color: #000;
				margin-left: 40rpx;
			}
		}
	}
}
</style>